<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background-color: pink;
            top: 20px;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出效果</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        //fadeln([s],[e],[fn]) 淡入效果
        $(function(){
            $("button").eq(0).click(function(){
                //淡入效果  fadeIn()
                $("div").fadeIn(1000);
            })
        })
        //fadeOut([s],[e],[fn]) 淡出效果
        $(function(){
            $("button").eq(1).click(function(){
                //淡出效果  fadeOut()
                $("div").fadeOut(1000);
            })
        })
        //fadeToggle([s,[e],[fn]]) 淡入淡出切换效果
        $(function(){
            $("button").eq(2).click(function(){
                //淡入淡出效果切换  fadeToggle()
                $("div").fadeToggle(1000);
            })
        })
        //fadeTo([[s],o,[e],[fn]]) 把元素的透明度修改为多少
        $(function(){
            $("button").eq(3).click(function(){
                //修改透明度  fadeTo()
                /*效果参数
                    opacity 透明度必须写，取值0-1之间
                    speed  三种预定速度之一的字符串（"slow","normal","fast"）或者直接跟时长 必须写
                    easing  (Optional)用来指定切换效果  默认是“swing” ，可用参数“linear”*/
                    $("div").fadeTo(1000,0.5);
            })
        })
    </script>
</body>
</html>